import React, { useState } from 'react';
import { useTodo } from '../context/TodoContext';

function TodoForm({ category }) {
  const { addTodo } = useTodo();
  const [inputValue, setInputValue] = useState('');
  
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue.trim() !== '') {
      addTodo(inputValue, category);
      setInputValue('');
    }
  };
  
  return (
    <form className="demo3-todo-form" onSubmit={handleSubmit}>
      <input
        type="text"
        className="demo3-todo-input"
        value={inputValue}
        onChange={handleInputChange}
        placeholder={`添加新的${category === 'work' ? '工作' : category === 'personal' ? '个人' : '购物'}待办事项...`}
      />
      <button type="submit" className="demo3-todo-add-button">添加</button>
    </form>
  );
}

export default TodoForm; 